<template>
  <view :class="[`${prefixCls}-payment-result-container`]">
    <!-- <cu-uploader v-model="images"></cu-uploader> -->
    <uv-image
      width="100px"
      height="100px"
      :customStyle="{ margin: '0 auto 40rpx' }"
      shape="circle"
      :src="$CDN(`/common/static/images/${optionsInfo.payState === 'success' ? 'payment-success' : 'payment-error'}.png`)"
    ></uv-image>
    <view class="title">{{ `${orderTypeInfo.name ? orderTypeInfo.name : '支付'}${optionsInfo.payState === 'success' ? '成功' : '失败'}` }}</view>
    <view class="description">{{ orderTypeInfo.desc ? orderTypeInfo.desc : '' }}</view>
    <view class="button-group">
      <uv-button
        type="primary"
        shape="circle"
        :customStyle="{ marginBottom: '40rpx' }"
        @click="$ROUTE.redirect('/pages/subpackage/reserved/my-reservation')"
        text="我的预定"
        v-if="orderTypeInfo.type === 'reserve'"
      ></uv-button>
      <uv-button
        type="primary"
        shape="circle"
        :customStyle="{ marginBottom: '40rpx' }"
        @click="$ROUTE.redirect('/pages/subpackage/bill/list')"
        text="我的账单"
        v-if="orderTypeInfo.type === 'bill'"
      ></uv-button>
      <uv-button type="primary" plain shape="circle" :customStyle="{ marginBottom: '40rpx' }" @click="$ROUTE.go('/pages/main/home')" text="返回首页"></uv-button>
      <!-- #ifdef MP -->
      <!-- 从APP跳转到小程序的场景需要从小程序返回到APP -->
      <uv-button type="success" plain openType="launchApp" :appParameter="JSON.stringify(optionsInfo)" @error="launchAppError" text="返回APP" v-if="scene === 1069"></uv-button>
      <!-- #endif -->
    </view>
  </view>
</template>

<script>
import { BillPaySuccess, getPaymentRes, reserveSuccess } from '@/api/payment'
import { OrderTypeList } from '@/common/enums/orderEnum'
import { isEmpty } from '@/common/helper/is'
import { mapActions, mapGetters } from 'vuex'
export default {
  name: 'paymentResult',
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      // images: [],
      scene: uni.getLaunchOptionsSync().scene,
      optionsInfo: {},
      payResultInfo: {},
      orderTypeInfo: {},
    }
  },
  // 侦听属性
  watch: {},
  // 计算属性
  computed: {
    ...mapGetters([]),
  },
  // 监听页面加载
  onLoad(options) {
    this.optionsInfo = !isEmpty(options) ? options : { orderSN: '', payment: '', payState: 'fail', scene: '' }
    this.matchOrderType()
    // this.getPaymentResult() // 暂时不做支付返回统一

    // scene 场景处理业务逻辑
    this.handleScene()
  },
  // 监听页面显示，页面每次出现在屏幕上都触发
  onShow() {},
  // 监听页面初次渲染完成，此时组件已挂载完成
  onReady() {},
  // 下拉刷新
  onPullDownRefresh() {},
  // 加载更多
  onReachBottom() {},

  created() {},
  mounted() {},
  destroyed() {},
  methods: {
    ...mapActions([]),

    // 匹配订单支付类型获取订单类型对象配置
    matchOrderType() {
      this.orderTypeInfo = OrderTypeList.find((item) => item.type === this.optionsInfo.scene) || {}
    },

    // 获取支付结果
    async getPaymentResult() {
      const { errcode, data } = await getPaymentRes()
    },

    // 根据不同scene 场景业务处理
    async handleScene() {
      console.log('this', this)
      const { outTradeNo = '' } = this.optionsInfo
      switch (this.orderTypeInfo.type) {
        case 'reserve':
          await reserveSuccess({ outTradeNo, paymentMethod: 'construction_wx' })
          break
        case 'bill':
          if (!outTradeNo) return
          await BillPaySuccess({ outTradeNo })
          break
        default:
          break
      }
    },
    launchAppError(e) {
      console.log('🚀 ~ launchAppError ~ e:', e.detail)
    },
  },
}
</script>

<style lang="scss" scoped>
page {
  background: #fff !important;
}
.#{prefixCls('payment-result-container')} {
  position: relative;
  padding: 300rpx 30rpx 30rpx;
  text-align: center;
  .title {
    margin-bottom: 20rpx;
    font-size: 36rpx;
    color: #222;
    font-weight: 600;
  }
  .description {
    color: $uv-info;
  }
  .button-group {
    margin-top: 50rpx;
    padding: 0 30rpx;
  }
}
</style>
